<template>
  <div>
    <el-form  ref="formData" :model="formData" :rules="rules" label-width="100px" class="login-box">
      <h3 class="login-title">学生信息填写</h3>
      <el-row :gutter="10">
      <el-col :span="20">
        <el-form-item prop="name" label="姓名">
          <el-input maxlength="20" size="medium" v-model="formData.name" placeholder="请输姓名" type="text" prefix-icon="icon-login_user" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="40">
        <el-form-item prop="sex" label="性别">
          <el-select v-model="formData.sex" class="el-select">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="20">
        <el-form-item prop="sfz" label="身份证">
          <el-input maxlength="30" size="medium" v-model="formData.sfz" placeholder="输入身份证号" type="text" prefix-icon="icon-login_user" clearable/>
        </el-form-item>
      </el-col>

      <el-col :span="40">
        <el-form-item prop="intention" label="报考方向">
          <el-select v-model="formData.intention">
            <el-option label="专升本" value="专升本"></el-option>
            <el-option label="高升本" value="高升本"></el-option>
            <el-option label="高升专" value="高升专"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="20">
        <el-form-item prop="address" label="地址">
          <el-input maxlength="20" size="medium" v-model="formData.address" placeholder="请输地址" type="text" prefix-icon="icon-login_user" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="20">
        <el-form-item prop="email" label="邮箱">
          <el-input maxlength="20" size="medium" v-model="formData.email" placeholder="请输邮箱" type="text" prefix-icon="icon-login_user" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="20">
        <el-form-item prop="intro" label="简介">
          <el-input maxlength="20" size="medium" v-model="formData.intro" type="textarea" prefix-icon="icon-login_user" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="20">

      </el-col>
      <el-col :span="20">
        <el-form-item>
          <el-button type="primary" round class="btnlocation" @click="Register('formData')" >提交</el-button>
          <el-button class="btnlocation" round @click="goBack">返回</el-button></el-form-item>
      </el-col>

    </el-row>

  </el-form>
  </div>

</template>

<script>
    export default {
        name: "StudentInfo",
      data(){
        var checkEmail = (rule, value, callback) => {
          const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
          if (!value) {
            return callback(new Error('邮箱不能为空'))
          }
          setTimeout(() => {
            if (mailReg.test(value)) {
              callback()
            } else {
              callback(new Error('请输入正确的邮箱格式'))
            }
          }, 100)
        };
        let idCardValidity = (rule, code, callback) => {
          var city = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江 ", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北 ", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏 ", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外 " };
          var tip = ""
          var pass = true

          if (!code || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(code)) {
            tip = "身份证号格式错误"
            pass = false;
          } else if (!city[code.substr(0, 2)]) {
            tip = "地址编码错误"
            pass = false
          } else {
            // 18位身份证需要验证最后一位校验位
            if (code.length === 18) {
              code = code.split('')
              // ∑(ai×Wi)(mod 11)
              // 加权因子
              var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]
              // 校验位
              var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]
              var sum = 0
              var ai = 0
              var wi = 0
              for (var i = 0; i < 17; i++) {
                ai = code[i]
                wi = factor[i]
                sum += ai * wi
              }
              var last = parity[sum % 11];
              if (parity[sum % 11] != code[17]) {
                tip = "请输入正确的身份证号"
                pass = false
              }
            }
          }
          if (!pass) {
            callback(new Error(tip))
          } else {
            callback()
          }
          // if (!pass) alert(tip)
          // return pass
        }
        return{
          formData: {
            sid:'',
            name: '',
            snum: '',
            sex: '',
            sfz: '',
            xl: '',
            intention: '',
            address: '',
            intro: '',
            email: '',
            head: ''
          },
          rules: {
            name: [
              {required: true, message: '姓名不可为空', trigger: 'blur'}
            ],
            sex: [
              {required: true,message: '性别不可为空', trigger: 'blur'}
            ],
            xl: [
              {required: true,message: '学历不可为空', trigger: 'blur'}
            ],
            intention: [
              {required: true,message: '报考意向不可为空', trigger: 'blur'}
            ],
            sfz: [{ required: true, message: '请输入证件号', trigger: 'blur' },
              { validator: idCardValidity, trigger: 'blur' }],
            address: [
              {required: true,message: '地址不可为空', trigger: 'blur'}
            ],
            email: [
              {required: true,validator:checkEmail, trigger: 'blur'}
            ]
          },
        }
      },
      methods: {
        getProjectNum() {
          const projectTime = new Date() // 当前中国标准时间
          const Year = projectTime.getFullYear() // 获取当前年份 支持IE和火狐浏览器.
          const Month = projectTime.getMonth() + 1 // 获取中国区月份
          const Day = projectTime.getDate() // 获取几号
          var CurrentDate = Year
          if (Month >= 10) { // 判断月份和几号是否大于10或者小于10
            CurrentDate += Month
          } else {
            CurrentDate += '0' + Month
          }
          if (Day >= 10) {
            CurrentDate += Day
          } else {
            CurrentDate += '0' + Day
          }
          return CurrentDate
        },
        Register(formData){
          this.$refs[formData].validate(valid => {
            if (valid) {
              this.formData.sid = sessionStorage.getItem("uid");
              let snum = sessionStorage.getItem("user");
              console.log(snum);
              this.formData.snum = this.getProjectNum()+snum.substring(7);
              console.log(this.formData.snum);
              this.$axios
              .post("/updateStudent",this.formData)
              .then(res =>{
                if(res.data.code === 200){
                  this.$message({
                    type: 'success',
                    message: '您已注册成功'
                  });
                  this.$router.replace("/");
                  window.sessionStorage.clear();
                }else {
                  this.$message({
                    type: 'error',
                    message: res.data.msg
                  });
                }
              })
            }
          })
        },
        goBack(){
          this.$router.push("/");
          sessionStorage.clear();
        }
      }
    }
</script>

<style lang="scss" scoped>
  .login-box {
    border: 10px solid #DCDFE6;
    width: 450px;
    margin: 200px auto;
    padding: 50px 50px 40px 60px;
    border-radius: 20px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }
  .login-title {
    text-align: center;
    margin: 0 0 20px 20px;
    color: #303133;
  }
  .btnlocation{
    margin: 8px 35px 10px auto;
  }
  .el-radio{
    margin: 8px 35px 10px auto;
  }
</style>

